<template>

  <div>

    <!--搜索框部分-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="账单组名称">
          <el-input placeholder="请输入账单组名称" v-model.trim="searchBillGroupParam.name" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="getBillingGroupPageListBefore">查询</el-button>
          <el-button type="warning" size="mini" @click="resetQueryBillGroup">重置</el-button>
          <el-button type="warning" size="mini" @click="openSaveBillGroup">新增</el-button>
        </el-form-item>

      </el-form>

    </el-card>


    <!--列表-->
    <el-card style="margin-top: 10px">

      <el-table
        :data="billGroupTable.data"
        max-height="630px"
        height="630px"
        style="width: 100%">

        <el-table-column
          prop="name"
          label="组名称"
        >
        </el-table-column>

        <el-table-column
          prop="content"
          label="内容"
        >
        </el-table-column>

        <el-table-column
          prop="importance"
          label="重要性"
        >
          <template slot-scope="scope">
            <el-tag type="danger" size="mini" v-if="scope.row.importance === 1">核心</el-tag>
            <el-tag type="warning" size="mini" v-else-if="scope.row.importance === 2">重要</el-tag>
            <el-tag size="mini" v-else-if="scope.row.importance === 5">一般</el-tag>
            <el-tag type="info" size="mini" v-else >-</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button @click="toOpenBillGroupDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看账单</el-button>
            <el-button @click="openUpdBillGroup(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button @click="delBillGroupByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--分页部分-->
      <el-pagination
        style="width:33%; margin-right:10px; margin-top:10px;"
        background
        layout="total, prev, pager, next, jumper"
        @current-change="billGroupPageCurrentChange"
        :page-size="pageConfig.size"
        :current-page="pageConfig.current"
        :pager-count="5"
        :total="pageConfig.total">
      </el-pagination>

    </el-card>


    <BillingGroupSaveUpd ref="BillingGroupSaveUpdRef" @getBillingGroupPageList="getBillingGroupPageList"/>
    <BillingGroupDetails ref="BillingGroupDetailsRef"/>

  </div>

</template>

<script>

  import http from '@/utils/http'
  import BillingGroupSaveUpd from './BillingGroupSaveUpd'
  import BillingGroupDetails from './BillingGroupDetails'

  export default {
    name: "BillingGroupList",
    components: {
      BillingGroupSaveUpd,
      BillingGroupDetails,
    },
    data(){
      return {
        // 查询请求参数
        searchBillGroupParam: {
          name: null,
        },
        // 列表数据
        billGroupTable: {
          // 数据
          data: [],
        },
        // 分页参数
        pageConfig: {
          // 每页记录数
          size: 8,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
      }
    },
    methods: {

      /**
       * 删除提示
       * @param row 这一行数据
       */
      delBillGroupByIdTips(row){
        this.$confirm('是否删除, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delBillingGroup(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 根据ID删除账单组
       * @param row 这一行数据
       */
      delBillingGroup(row){
        http.post("/bill/delBillingGroup", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getBillingGroupPageList()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页被改变的时候
       * @param value 当前页
       */
      billGroupPageCurrentChange(value){
        this.pageConfig.current = value
        this.getBillingGroupPageList()
      },
      /**
       * 查询前先重置
       */
      getBillingGroupPageListBefore(){
        this.pageConfig.current = 1
        this.getBillingGroupPageList()
      },
      /**
       * 分页查询账单组
       */
      getBillingGroupPageList(){
        this.searchBillGroupParam.current = this.pageConfig.current
        this.searchBillGroupParam.size = this.pageConfig.size

        http.post("/bill/getBillingGroupPageList", this.searchBillGroupParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.pageConfig.total = data.total;
          this.pageConfig.current = data.current;
          this.pageConfig.size = data.size;
          // 处理数据
          this.billGroupTable.data = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 新增账单组-打开弹框
       */
      openSaveBillGroup(){
        this.$refs.BillingGroupSaveUpdRef.openBillGroup('save', null)
      },
      /**
       * 修改账单组-打开弹框
       * @param row 当前行数据
       */
      openUpdBillGroup(row){
        this.$refs.BillingGroupSaveUpdRef.openBillGroup('upd', row)
      },
      /**
       * 弹出账单信息
       * @param row 当前账单组信息
       */
      toOpenBillGroupDetailed(row){
        this.$refs.BillingGroupDetailsRef.beforeEnteringPage(row.id)
      },
      /**
       * 重置
       */
      resetQueryBillGroup(){
        this.searchBillGroupParam = {
          name: null,
        }
      },
    },
    mounted(){
      this.getBillingGroupPageList()
    }
  }
</script>

<style scoped>

</style>
